<template>
  <div class="box">
    <ul class="bg-bubbles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="login-wrapper">
      <div class="right">
        <div class="logo">
          <div class="logo-image"></div>
        </div>
          <el-form ref="loginForm" :rules="rules" :model="loginForm">
            <el-form-item prop="name">
              <el-input placeholder="请输入用户名" v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input show-password placeholder="请输入密码" v-model="loginForm.password" @keyup.enter="getLogin"></el-input>
            </el-form-item>
            <div style="display: flex; justify-content: space-between">
              <el-radio>记住密码</el-radio>
              <el-button type="text">忘记密码</el-button>
            </div>
            <el-form-item>
              <el-button class="login-btn" @click="getLogin">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import router from "@/router";

export default {
  name: "loginPage",
  data() {
    return {
      loginForm: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '用户名不得为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不得为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loginForm.userName = this.rowData
    console.log(this.loginForm.userName)
  },
  methods: {
    getLogin() {
      this.axios.post('/userLoginController/passwordLogin', this.loginForm).then(res => {
        let data = res.data;
        if (data.code === 200) {
          console.log("登录数据",data.data.userRole)
          if(data.data.userRole ==1 ){
            console.log("管理员登录")
            router.push('/stkadmin')
          }
          if(data.data.userRole ==4 ){
            console.log("广告主登录")
            router.push('/advertiser')
          }
        }
        else {
          ElMessage.warning(data.message)
        }
      })
    }
  }
}
</script>


<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #50a3a2;
  background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
.login-wrapper {
  display: flex;
  width: 25vw;
  height: 60vh;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px rgb(0 0 0 / 20%);
}
.logo {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.logo-image {
  width: 50%;
  height: 65%;
  background: url("@/assets/logo3.png") no-repeat;
  background-size: cover;
}
.right {
  width: 100%;
  padding: 30px;
  position: relative;
}
h1 {
  text-align: center;
  font-size: 20px;
  color: rgb(59, 72, 89);
}
.login-btn {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  font-weight: 100;
  margin-top: 50px;
  cursor: pointer;
  background-color: #75CB00;
}
.login-btn:hover,.login-btn:active,.login-btn:focus {
  background-color: #6cb704;
  color: #fff;
}
.el-input {
  height: 40px;
}
.bg-bubbles {
  width: 100%;
  height: 100%;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  animation: square 25s infinite;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  animation-delay: 2s;
  animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;

}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  animation-delay: 2s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 0;
  width: 160px;
  height: 160px;
  animation-delay: 11s;
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px) rotate(1000deg);
  }
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px) rotate(1000deg);
  }
}
</style>
